<template>
	<view class="address">
		<base-navbar back-color="#fff" title="收货地址"></base-navbar>
		<view class="card-list">
			<view class="card" v-for="(item, index) in addressList" :key="index">
				<view @click="selectAddress(item)">
					<view class="user">
						<text class="name">{{item.consignee}}</text>
						<text class="phone">{{item.mobile}}</text>
					</view>
					<view class="area">{{item.formatAddress}}</view>
				</view>
				<view class="other">
					<label class="check">
						<uni-icons type="circle-filled" :color="themeColor.theme" size="24" v-if="item.is_default"
							@click="changeDefault(0, item.id)"></uni-icons>
						<uni-icons type="circle" color="#909399" size="24" v-else
							@click="changeDefault(1, item.id)"></uni-icons>
						<text class="label">默认地址</text>
					</label>
					<view class="actions">
						<view class="item" @click="pageRoute('/pages/users/address/form?id=' + item.id)">
							<uni-icons type="compose" size="24" color="#909193"></uni-icons>
							<text class="label">编辑</text>
						</view>
						<view class="item" @click.stop="deleteHandle(item.id)">
							<uni-icons type="trash" size="24" color="#909193"></uni-icons>
							<text class="label">删除</text>
						</view>
					</view>
				</view>
			</view>
			<c-button :style="{'background':themeColor.theme,'color':'#fff'}" round size="medium" block
				@click="pageRoute('/pages/users/address/form')">+添加地址</c-button>
		</view>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import checkLogin from '@/utils/login';
	import {
		ref,
		reactive,
		toRefs,
		inject
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: JSON.parse(cache.get('themeColor')),
		addressList: [],
	});

	onLoad((opt) => {});

	onShow(() => {
		//登录过期自动登录
		console.log('登录状态', checkLogin());
		if (!checkLogin()) {
			pageRoute('/pages/users/login/login');
		} else {
			getList();
		}
	});

	function getList() {
		request.get('address/list').then(res => {
			// console.log('地址列表', res);
			state.addressList = res.data;
		})
	}

	function changeDefault(is_default, id) {
		request.get('address/changeDefault', {
			id: id,
			is_default: is_default,
		}).then(res => {
			uni.showToast({
				title: res.msg,
				duration: 2000
			})
			getList();
		})
	}

	function deleteHandle(id) {
		request.delete('address/delete', {
			id: id,
		}).then(res => {
			uni.showToast({
				title: res.msg,
				duration: 2000
			})
			getList();
		})
	}

	function selectAddress(item) {
		uni.$emit('select_address', {
			address_info: item
		})
		uni.navigateBack({
			delta: 1
		})
	}

	function pageRoute(url) {
		uni.navigateTo({
			url: url
		});
	}

	const {
		themeColor,
		addressList,
	} = toRefs(state);
</script>

<style lang="scss">
	.address {
		padding: $margin-24 $margin-24;
		box-sizing: border-box;

		.card-list {
			min-height: 91vh;
			padding: $margin-24;
			background-color: $bg-inverse-color;
			border-radius: $radius-16;
			box-sizing: border-box;

			.card {
				padding: $margin-24;
				box-sizing: border-box;
				border-bottom: 1rpx solid mix($white-color, $border-color, 35%);

				&:last-of-type {
					border-bottom: none;
				}

				.user {
					display: flex;
					align-items: center;
					padding: $margin-24 0;

					.name {
						font-size: $font-32;
						color: $main-color;
					}

					.phone {
						margin-left: $margin-12;
					}
				}

				.area {
					padding: $margin-4 0;
					font-size: $font-24;
					color: $tips-color;
				}

				.other {
					@include f-between;
					padding: $margin-24 0;

					.check {
						@include f-center;
					}

					.actions,
					.actions .item {
						@include f-center;
					}

					.actions .item {
						margin-left: $margin-20;
					}

					.label {
						margin-left: $margin-4;
						font-size: $font-24;
					}
				}
			}

			.c-button {
				margin-top: $margin-32;
			}
		}
	}
</style>